<template>
  <div class="loader" ref="loader">
    <h1 class="title">加载中...</h1>
    <h4 class="paragraph">
        （一直卡在这里说明设备性能太差了 -> “浏览器性能检测器”）
    </h4>
  </div>
  <div class="banner section">
    <div class="container">
      <h1 class="title" data-textify-title>欢迎!!!</h1>
      <h2 class="sub-title" data-textify>
        这个网站上部署了一些实用的工具（尽管并不向公众开放）
      </h2>
      <p class="paragraph" data-textify>
        鲁ICP备2025137395号
      </p>
    </div>
  </div>
  <div class="extra-section">
    <div class="container">
      <div class="section-content">
        <h1 class="sub-title" data-textify-title>
          私有云部署->提供文件收集服务
        </h1>
        <p class="paragraph" data-textify>
          -> 高安全性：配备先进加密与访问控制，保护敏感数据。
        </p>
        <p class="paragraph" data-textify>
          -> 基于开源项目：基于NextCloud开源项目。
        </p>
      </div>
      <div class="section-media">
        <button @click="openPHP" class="big-button">
    立即打开 <strong>私有云</strong>
  </button>
      </div>
    </div>
  </div>
  <div class="center-section">
    <div class="container">
      <h1 class="title" data-textify-title>尚未完成....</h1>
      <p class="paragraph" data-textify>
        以下项目还在开发中，当前没有部署在briancloud.top上
      </p>
    </div>
  </div>
    <div class="extra-section">
    <div class="container">
      <div class="section-content">
        <h1 class="sub-title" data-textify-title>
          深度定制的问卷系统
        </h1>
        <p class="paragraph" data-textify>
          -> 基于Vue3.0+Spring Boot的问卷系统，可高度自定义问卷形式。
        </p>
        <p class="paragraph" data-textify>
          -> 可发起文件收集请求，自定义限制文件的类型、大小、内容，内置对违规内容的审查。
        </p>
        <p class="paragraph" data-textify>
          -> 支持高并发
        </p>
      </div>
      <!-- <div class="section-media">
        <ParallaxImage
          src="1.jpg"
          alt="Image"
          className="section-media-image"
          wrapperClassName="section-media-wrapper"
        />
      </div> -->
    </div>
  </div>
  <div class="images-gallery">
    <div class="container">
      <ParallaxImage
        src="7.png"
        alt="Image"
        className="gallery-image"
        wrapperClassName="image-wrapper"
      />
    </div>
  </div>
  <div class="center-section">
    <div class="container">
      <h4 class="sub-title" data-textify-title>已经到底了</h4>
      <p class="paragraph" data-textify>
        ...
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      images: null,
      loaded: false
    };
  },
  methods: {
    createLoader() {
      this.images = document.querySelectorAll("img");
      new this.$loader({
        images: this.images,
        onLoaded: () => {
          this.loaded = true;
          document.body.classList.add("loaded");
          new this.$textify(); // text animations
        }
      });
    }
  },
  watch: {
    loaded() {
      if (this.loaded) {
        this.$refs.loader.classList.add("inactive");

        setTimeout(() => {
          this.$refs.loader.remove();
        }, 1000);
      }
    }
  },
  mounted() {
    this.createLoader();
    console.log("这个Vue模板为什么把图片部分删了就加载不出来了？，没办法只能把图片换成背景颜色了....");
    
  }
};
</script>
<script setup>
function openPHP() {
  window.open('https://www.briancloud.top/nextcloud', '_blank')
}
</script>

<style lang="scss" scoped></style>
<style scoped>
.big-button {
  padding: 24px 48px;
  font-size: 36px;
  background-color: #929292;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.big-button:hover {
  background-color: #f2f2f2;
}
</style>